<template>
  <div class="wrap appointmentContent">
    <div class="search">
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="预约号" prop="orderNum">
          <el-input v-model="formInline.orderNum" placeholder="请输入预约号"></el-input>
        </el-form-item>
        <el-form-item label="申请人名" prop="name">
          <el-input v-model="formInline.name" placeholder="请输入申请人名"></el-input>
        </el-form-item>
        <!-- <el-form-item class="time" label="时间选择">
          <time-scope @receiptTime="storeTime" :vals="formInline.valNum"></time-scope>
        </el-form-item> -->
        <el-form-item class="time" label="时间选择">
          <el-date-picker
            :clearable=false
            v-model="valNumDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small" 
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="info" size="small" @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="list">
      <el-tabs type="border-card" v-model="activeName" @tab-click="val">
        <el-tab-pane label="代办结" name="1">
          <el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column label="序号" type="index" align="center"></el-table-column>
            <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
            <el-table-column prop="order_number" label="预约号码" align="center"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column align="center" prop="submit_time" label="预约时间"></el-table-column>
            <el-table-column prop="business_number" label="业务个数" align="center"></el-table-column>
            <el-table-column align="center" label="办理状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1">待办理</p>
                <p v-if="scope.row.commitStatus == 2">已办理</p>
                <p v-if="scope.row.commitStatus == 3">已跳过</p>
              </template>
            </el-table-column>

            <el-table-column prop="operate" label="操作" align="center" width="210">
              <template slot-scope="scope">
                <!-- el-icon-document-checked -->
                <div class="operations">
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, false , 2)"
                    icon="el-icon-document-checked"
                  >办结</el-link>
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, false , 3)"
                    icon="el-icon-document-delete"
                  >跳过</el-link>
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, true)"
                    icon="el-icon-document"
                  >查看业务</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已办结" name="2">
          <el-table class="table" :data="tableDatas" style="width: 100%">
            <el-table-column align="center" label="序号" type="index"></el-table-column>
            <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
            <el-table-column prop="order_number" label="预约号码" align="center"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column align="center" prop="submit_time" label="预约时间"></el-table-column>
            <el-table-column prop="business_number" label="业务个数" align="center"></el-table-column>
            <el-table-column align="center" label="办理状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1">待办理</p>
                <p v-if="scope.row.commitStatus == 2">已办理</p>
                <p v-if="scope.row.commitStatus == 3">已跳过</p>
              </template>
            </el-table-column>

            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row, true)"
                  icon="el-icon-document"
                >查看业务</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="跳过项" name="3">
          <el-table class="table" :data="tableDataJump" style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column align="center" prop="submit_time" label="预约时间"></el-table-column>
            <el-table-column prop="business_number" label="业务个数" align="center"></el-table-column>
            <el-table-column align="center" label="办理状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1">待办理</p>
                <p v-if="scope.row.commitStatus == 2">已办理</p>
                <p v-if="scope.row.commitStatus == 3">已跳过</p>
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="预约号码" align="center"></el-table-column>
            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <div class="operations">
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, false , 2)"
                    icon="el-icon-document-checked"
                  >办结</el-link>
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, true)"
                    icon="el-icon-document"
                  >查看业务</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <div class="paging"> -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10,20,30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <!-- </div> -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import timeScope from "../../components/wDate";
export default {
  data() {
    return {
      // 日期
      valNumDate:[],
      activeName: "1",
      // 页每页数据
      pageSize: 10,
      // 当前页
      pageNum: 1,
      // 总数量
      total: 0,
      formInline: {
        valNum: 1,
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        orderNum: "", // 预约号
        name: "", // 申请人名字
        commitStatus: "", // 状态
      },
      value: "",
      options: [
        {
          value: "1",
          label: "待办结",
        },
        {
          // value: "6",
          value: "2",
          label: "已办结",
        },
      ],
      tableData: [],
      tableDatas: [],
      tableDataJump: [],
    };
  },
  methods: {
    val() {
      this.request(Number(this.activeName));
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      // //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.val();
    },
    handleCurrentChange(val) {
      // //console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.val();
    },
    //接收时间
    storeTime(startTime, endTime) {
      this.formInline.startTime = startTime;
      this.formInline.endTime = endTime;
    },
    resetForm(formName) {

      this.$refs[formName].resetFields();
      this.formInline.valNum++;
      // this.formInline.startTime = "";
      // this.formInline.endTime = "";
      this.valNumDate = [];
    },
    //查询
    onSubmit(v, num = this.activeName) {
      console.log(this.valNumDate[0])
      // return
      if (this.formInline.commitStatus) {
        num = this.formInline.commitStatus;
        this.activeName = this.formInline.commitStatus;
      }
      var _this = this;
      this.$http
        .get(
          // "/trademark/proPublic/findByType",
          "/trademark/order/listBackOrder",
          {
            params: {
              pageSize: this.pageSize,
              pageNum: this.pageNum,
              orderNum: this.formInline.orderNum.trim(), // 预约号
              appname: this.formInline.name.trim(), // 申请人
              status: num, // 办理状态
              orderBgDate: this.valNumDate[0],
              orderEdDate: this.valNumDate[1],
              // orderBgDate: (function () {
              //   if (_this.formInline.startTime) {
              //     let timer = new Date(_this.formInline.startTime);
              //     return timer;
              //   } else {
              //     return "";
              //   }
              // })(), // 开始日期
              // orderBgDate: "2020-09-01", // 开始日期
              // orderEdDate: (function () {
              //   if (_this.formInline.startTime) {
              //     let timer = new Date(_this.formInline.endTime);
              //     return timer;
              //   } else {
              //     return "";
              //   }
              // })(), //
              // orderEdDate: "2020-09-02", //
              orderSr: 0, //  预约来源 ： 0 线上预约 1 线下预约
            },
          }
        )
        .then((result) => {
          let datble = [];

          let res = result.data;
          if (res.code != 200) return;

          // this.pageSize = res.data.pageSize;// 页每页数据

          // this.pageNum = res.data.pageNum; // 当前页

          this.total = res.data.total; // 总数量

          let data = res.data.list || []; // 表格数据
          data.forEach((item, index) => {
            datble.push({
              name: item.applicantName,
              phone: item.phone,
              submit_time: item.orderDate, // 预约时间
              business_number: item.orderSum, // 业务个数
              commitStatus: item.orderStatus, // 办理状态
              order_number: item.orderNum, // 预约号码
              order_Id: item.orderId, // 预约ID
            });
          });
          switch (Number(num)) {
            case 1:
              this.tableData = datble;
              break;
            case 2:
              this.tableDatas = datble;
              break;
          }
          // this.formInline.commitStatus = "";
        });
    },
    //操作选择
    handleEdit(index, item, boolean, num) {
      boolean ? this.alter(item) : this.skip(item, num);
    },
    skip(item, num) {
      this.$http
        .get("/trademark/order/updateStatus", {
          params: {
            orderId: item.order_Id,
            status: num,
          },
        })
        .then((res) => {
          this.request(Number(this.activeName));
        });
    },
    alter(item) {
      this.$router.push({
        path: "appointmentAudit",
        query: {
          orderId: item.order_Id,
        },
      });
    },
    request(Num = 1) {
      let url;
      let datble;
      url = "/trademark/order/listBackOrder";
      var _this = this;
      this.$http
        .get(url, {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            orderNum: this.formInline.orderNum, // 预约号
            appname: this.formInline.name, // 申请人
            status: Num, // 办理状态
            orderBgDate: this.valNumDate[0],
            orderEdDate: this.valNumDate[1],
            // orderBgDate: (function () {
            //   if (_this.formInline.startTime) {
            //     let timer = new Date(_this.formInline.startTime);
            //     return timer;
            //   } else {
            //     return "";
            //   }
            // })(), // 开始日期
            // orderEdDate: (function () {
            //   if (_this.formInline.startTime) {
            //     let timer = new Date(_this.formInline.endTime);
            //     return timer;
            //   } else {
            //     return "";
            //   }
            // })(), //
            orderSr: 0, //  预约来源 ： 0 线上预约 1 线下预约
          },
        })
        .then((result) => {
          console.log(result);
          let datble = [];

          let res = result.data;
          if (res.code != 200) return;

          this.total = res.data.total; // 总数量

          let data = res.data.list || []; // 表格数据
          // return
          datble = [];
          data.forEach((item, index) => {
            datble.push({
              // dan_number: item.orderNum,
              name: item.applicantName, // 申请人名
              phone: item.phone, // 手机号
              submit_time: item.orderDate, // 预约时间
              business_number: item.orderSum, // 业务个数
              commitStatus: item.orderStatus, // 办理状态
              order_number: item.orderNum, // 预约号码
              order_Id: item.orderId, // 预约ID
            });
          });
          switch (Num) {
            // 待办结
            case 1:
              this.tableData = datble;
              break;
            // 已办结
            case 2:
              this.tableDatas = datble;
              break;
            // 跳过项
            case 3:
              this.tableDataJump = datble;
              break;
          }
        });
    },
  },
  mounted() {
    this.request();
  },
  components: {
    timeScope,
  },
};
</script>
<style lang="less" scoped>
.wrap {
  width: 100%;
  .search {
    .demo-form-inline {
      text-align: left;
    }
  }
  .table {
    .tiao {
      color: #fff;
      text-decoration: none;
    }
  }
}
.operations {
  display: flex;
  justify-content: space-around;
}
.el-link {
  font-size: 12px;
}
.el-button + .el-button {
  margin-left: 15px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
     width: 250px !important;
}
</style>
